<template>
  <template v-for="(item, index) in fileData" :key="index">
    <div class="notes flexCenter" v-if="type == 'file'">
      <!-- <van-icon name="description" size="20px" style="margin-right: 10rpx" /> -->
      <div
        style="flex: 1; overflow: hidden; text-overflow: ellipsis; color: #3974f6"
        @click.stop="openDocument(item.fileUrl)"
      >
        {{ item.fileName }}
      </div>
      <van-icon class="del" name="delete-o" @click.stop="del(item, index)" v-if="showDel" />
    </div>
    <div v-else-if="type == 'img'">
      <img :src="utils.baseUrl + item.filePath" alt="" />
    </div>
  </template>
</template>

<script setup lang="ts">
import utils from "@/utils";
import type { FileDataType } from "@/utils/types";

const prop = defineProps({
  fileData: {
    type: Array<FileDataType>,
    default: [],
  },
  showDel: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "file",
  },
});
const emit = defineEmits(["del"]);
const del = (item: any, index: number) => {
  emit("del", item, index);
};
const openDocument = (v: string) => {
  utils.openDocument(utils.baseUrl + v);
};
</script>

<style lang="less" scoped>
.notes {
  padding: 28rpx 0;
  // margin-top: 24rpx;
  background-color: #fff;
  font-size: 28rpx;
  color: #999;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}
.notes:last-child {
  border-bottom: 0 !important;
}
</style>
